<template>
  <!--
    A节点 --》B,C,D 节点

    C节点 --》 E，F节点

    D节点 --》 G，H，I节点
   -->
  <div>
    <p>routepage: #/vueProvideInject</p>
    <br />
    <div>
      <p>组件层次结构说明</p>
      <pre>
A节点 --》 B, C, D 节点

C节点 --》 E，F节点

D节点 --》 G，H，I节点
    </pre
      >
    </div>
    <!-- <ChildrenA /> -->
    <ChildrenA1 />
    <br />
    <hr />
    <p>知识点：</p>
    <pre>
1，provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
- 本例中可以切换组件childs_A的 index.vue 和 index1.vue 来查看是否为响应式显示, index1.vue使用了Vue.observable({object}), index.vue的provide直接返回的一个字符串    color: this.color 这样修改color是不会响应给旗下的子孙组件的。然而我们可以直接传递this（即本组件实例）因为旗下的子孙组件的color都是从this中拿的哦，注意观察就行了。

2，我们可以使用替代名（绑定名）来给接收inject中的key。如child_f.vue组件

3，如果我们打开C节点中的provide 修改A中的color是不会影响i节点的，i节点只会找到A节点中的color
    </pre>
  </div>
</template>
<script>
// import ChildrenA from './childs_A/index.vue'
import ChildrenA1 from './childs_A/index1.vue'
export default {
  name: 'provideInject',
  components: {
    // ChildrenA
    ChildrenA1
  },
  data() {
    return {}
  },
  methods: {},
  activated: {},
  deactivated: {}
}
</script>
<style>
.border,
.border1,
.border2 {
  border: 1px solid #000;
  padding: 10px 0;
  margin: 10px 10px 0;
}
.border1 {
  border-color: #ccc;
}
.border2 {
  border-color: #eee;
}
</style>
